<template>
  <div class="cascaderItem" :style="{ height: height }">
    <div class="left">
      <div class="label" v-for="item in items" @click="onClickLabel(item)">
        <span class="name">{{ item.name }}</span>
        <!-- 需要后端返回的数据具有isLeaf标识，是否有儿子，叶子即单身 -->
        <span class="icons">
          <template v-if="loadingItem&&item.name === loadingItem.name">
            <icon class="loading" name="loading"></icon>
          </template>
          <template v-else>
            <icon class="next" v-if="rightArrowVisible(item)" name="right"></icon>
          </template>
        </span>
      </div>
    </div>
    <div class="right" v-if="rightItems">
      <!-- TODO ↓这里的 @update:selected="onUpdateSelected" 很关键 -->
      <cascader-items
        :items="rightItems"
        :height="height"
        :level="level + 1"
        :selected="selected"
        :loading-item="loadingItem"
        :load-data="loadData"
        @update:selected="onUpdateSelected"
      ></cascader-items>
    </div>
  </div>
</template>

<script>
import Icon from "./icon";

export default {
  name: "cascader-items",
  components: { Icon },
  props: {
    items: {
      type: Array
    },
    height: {
      type: String
    },
    selected: {
      type: Array,
      default: () => {
        return [];
      }
    },
    loadData:{
      type:Function
    },
    loadingItem:{
      type:Object
      ,default:()=>({})
    },
    level: {
      type: Number,
      default: 0
    }
  },
  computed: {
    rightItems() {
      /*let currentSelected = this.selected[this.level];
          if (currentSelected && currentSelected.children) {
            return currentSelected.children;
          } else {
            return null;
          }*/

      //↑不支持动态加载 因为我们动态加载时 computed依赖的是this.items接受的数据 this.selected和this.level是不会变的 也就不会触发更新
      if (this.selected && this.selected[this.level]) {
        let item = this.items.filter(
          item => item.name === this.selected[this.level].name
        )[0];
        if (item && item.children && item.children.length > 0) {
          return item.children;
        }
      }
    }
  },
  methods: {
    onClickLabel(item) {
      // this.selected[this.level] = item;
      // console.log(this.selected[this.level]);

      //Vue.set(vm.someObject,'b',2)
      //vue中push等数组方法是经过改造的，有类似于set的功效
      // this.$set(this.selected,this.level,item);
      // console.log(this.selected[this.level]);

      //但↑这样修改了父组件的数据 违背单向数据流 不好
      let copy = JSON.parse(JSON.stringify(this.selected));
      copy[this.level] = item;
      copy.splice(this.level + 1);
      this.$emit("update:selected", copy);
    },
    onUpdateSelected(newSelected) {
      this.$emit("update:selected", newSelected);
    },
    rightArrowVisible(item){
      return this.loadData ? !item.isLeaf : item.children;
    }
  }
};
</script>

<style lang="scss">
@import "var";
.cascaderItem {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100px;
  .left {
    /*border:1px solid red;*/
    height: 100%;
    padding: 0.3em 0;
    overflow: auto;
  }
  .right {
    height: 100%;
    border-left: 1px solid $border-color-light;
    overflow: auto;
  }
  .label {
    padding: 0.5em 1em;
    display: flex;
    align-items: center;
    cursor:pointer;
    white-space:nowrap;
    .icons {
      margin-left: auto; //todo
      .next{
        transform: scale(0.5);
      }
      .loading{
        animation:spin 2s infinite linear;
      }
    }
    &:hover {
      background: $grey;
    }
    .name {
      margin-right: 1em;
      user-select:none;
    }
  }
}

</style>
